import 'package:flutter/material.dart';
import 'package:fsharing/core/models/bank.dart';
import 'package:fsharing/core/viewmodels/pages/mine/manage/bank_update_model.dart';
import 'package:fsharing/core/viewmodels/view_model.dart';
import 'package:fsharing/main.dart';
import 'package:fsharing/ui/widgets/background_container.dart';
import 'package:fsharing/ui/widgets/login_button.dart';
import 'package:fsharing/ui/widgets/round_back_button.dart';
import 'package:oktoast/oktoast.dart';
import 'package:provider/provider.dart';

class BankEditPage extends StatelessWidget {
  final Bank bank;

  BankEditPage({
    Key key,
    @required this.bank,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BankUpdateModel(Provider.of(context, listen: false), bank),
      child: BackgroundContainer(
        child: Scaffold(
          appBar: AppBar(
            leading: RoundBackButton(),
            title: Text(bank == null ? '添加银行账户' : '更新银行账户'),
          ),
          body: _BodyWidget(),
        ),
      ),
    );
  }
}

class _BodyWidget extends StatelessWidget {
  const _BodyWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    BankUpdateModel model = Provider.of(context);
    return SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 12),
        child: Column(
          children: <Widget>[
            _HeaderWidget(),
            Divider(height: 0.5),
            _SelectItemWidget(
              title: '账号类型：',
              hint: model.type == null ? '选择' : model.type.value,
              onTap: () => _onSelectClicked(context),
            ),
            Divider(height: 0.5),
            _EditItemWidget(
              title: '银行账号：',
              initial: model.bankCardId,
              hint: '输入账号',
              onChanged: (value) => model.bankCardId = value,
            ),
            Divider(height: 0.5),
            _EditItemWidget(
              title: '姓名：',
              initial: model.cardOwnerName,
              hint: '输入姓名',
              onChanged: (value) => model.cardOwnerName = value,
            ),
            Divider(height: 0.5),
            _EditItemWidget(
              title: '开户总行：',
              initial: model.mainBankName,
              hint: '例如：中国工商银行',
              onChanged: (value) => model.mainBankName = value,
            ),
            Divider(height: 0.5),
            _EditItemWidget(
              title: '开户支行：',
              initial: model.bankName,
              hint: '输入开户支行，必须完整',
              onChanged: (value) => model.bankName = value,
            ),
            Divider(height: 0.5),
            Container(
              alignment: Alignment.center,
              color: Colors.white,
              child: SwitchListTile(
                value: model.defaultAccount ?? false,
                onChanged: (value) {
                  model.defaultAccount = value;
                },
                title: Text(
                  '设为默认银行卡',
                  style: TextStyle(color: Color(0xFF181818), fontSize: 17),
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 68),
              child: Builder(
                builder: (context) {
                  return model.viewState == ViewState.busy
                      ? LoginButton.busy()
                      : LoginButton(
                          title: '确认提交',
                          function: () => _onConfirmClicked(context),
                        );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _onSelectClicked(BuildContext context) async {
    var mapEntry = await Navigator.of(context).pushNamed('/bank/type');
    if (mapEntry != null) {
      BankUpdateModel bankUpdateModel = Provider.of(context, listen: false);
      bankUpdateModel.type = mapEntry;
    }
  }

  void _onConfirmClicked(BuildContext context) async {
    BankUpdateModel bankUpdateModel = Provider.of(context, listen: false);
    ViewState viewState = await bankUpdateModel.bankUpdate();
    switch (viewState) {
      case ViewState.error:
        showToast(bankUpdateModel.errorMessage);
        break;
      default:
        Navigator.of(context).pop(true);
        break;
    }
  }
}

class _HeaderWidget extends StatelessWidget {
  const _HeaderWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/cart/img_store.png'),
          fit: BoxFit.fill,
        ),
      ),
      height: 50,
      child: Row(
        children: <Widget>[
          SizedBox(width: 12),
          Image.asset('assets/images/bank/ic_bank.png', width: 22),
          SizedBox(width: 10),
          Text('账号', style: TextStyle(fontSize: 17))
        ],
      ),
    );
  }
}

class _SelectItemWidget extends StatelessWidget {
  final String title;
  final String hint;
  final Function onTap;

  _SelectItemWidget({
    Key key,
    @required this.title,
    @required this.hint,
    @required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: lightTheme(),
      child: Material(
        child: InkWell(
          child: Container(
            height: 50,
            child: Row(
              children: <Widget>[
                SizedBox(
                  width: 100,
                  child: Text(
                    title,
                    textAlign: TextAlign.end,
                    style: TextStyle(fontSize: 17),
                  ),
                ),
                Expanded(
                  child: Text(
                    hint,
                    style: TextStyle(color: Colors.grey, fontSize: 16),
                  ),
                ),
                Icon(
                  Icons.keyboard_arrow_right,
                  color: Colors.black54,
                ),
              ],
            ),
          ),
          onTap: onTap,
        ),
      ),
    );
  }
}

class _EditItemWidget extends StatelessWidget {
  final String title;
  final String initial;
  final String hint;
  final Function(String) onChanged;

  _EditItemWidget({
    Key key,
    @required this.title,
    this.initial,
    @required this.hint,
    @required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: lightTheme(),
      child: Material(
        child: Container(
          height: 50,
          child: Row(
            children: <Widget>[
              SizedBox(
                width: 100,
                child: Text(
                  title,
                  textAlign: TextAlign.end,
                  style: TextStyle(
                    color: Color(0xFF181818),
                    fontSize: 17,
                  ),
                ),
              ),
              Expanded(
                child: TextFormField(
                  initialValue: initial,
                  decoration: InputDecoration(
                    hintText: hint,
                    border: InputBorder.none,
                  ),
                  onChanged: onChanged,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
